//变量
$theme_color: #ff5500 ;
$font_color: #343434;
$font_lightcolor: #666666;
$lightgray: #989898;
$border_color: #e6e6e6;
$bgcolor: #f0f0f0;
//编辑家谱 模板变量
$edit-border-color: #504330;
$edit-border-color-active: #ff5500; //编辑边框
$edit-name-font-color: #000000; //主标题 名字
$edit-subtitle-font-color: #000000; //副标题
$edit-english-font-color: #000000; //英文

html,body{
  height: 100%;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  min-height: 100%;
  position: relative;
  font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', '微软雅黑','Arial', sans-serif;
  color: $font_color;
  overflow-x: hidden;
  font-size: 14px;
  line-height: inherit;
}
ol, ul, li {
  list-style: none !important;
}
img,button{
  border: none;
}
img{
  vertical-align: middle;
}
a{
  text-decoration: none;
  color: $font_color;
}

//文本颜色
.text_theme{
  color: $theme_color !important;
}
.text_n{
  color: $font_color;
}
.text_dark{
  color: $font_lightcolor;
}
.text_lg{
  color: $lightgray;
}
.text_blue{
  color: #536b99;
}
//背景色
.bg_white{
  background: #ffffff;
}
.bg_gray{
  background: $bgcolor;
}

//字体相关
.fa-hx{
  font-size: 1.5em;
}
.fa-2x{
  font-size: 2em;
}
.fa-3x{
  font-size: 3em;
}
.f12{
  font-size: 12px !important;
}
.f14{
  font-size: 14px !important;
}
.f15{
  font-size: 15px;
}
.f16{
  font-size: 16px !important;
}
.f18{
  font-size: 18px !important;
}
.f22{
  font-size: 22px !important;
}
.f28{
  font-size: 28px !important;
}
.f32{
  font-size: 32px !important;
}
.fwn{
  font-weight: normal !important;
}
.fwb{
  font-weight: bold;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
//宽度
.w{
  width: 100%;
}
//外边距
.m-t-xs{
  margin-top: 5px;
}
.m-t{
  margin-top: 10px;
}
.m-t-lg{
  margin-top: 20px;
}
.m-b-xs{
  margin-bottom: 5px;
}
.m-b{
  margin-bottom: 10px;
}
.m-b-lg{
  margin-bottom: 20px;
}
.m-l-xs{
  margin-left: 5px;
}
.m-l{
  margin-left: 10px;
}
.m-l-lg{
  margin-left: 20px;
}
.m-r-xs{
  margin-right: 5px;
}
.m-r{
  margin-right: 10px;
}
.m-r-lg{
  margin-right: 20px;
}
.m-lr{
  margin: 0 10px;
}
.m-lr-md{
  margin: 0 15px;
}
.m-tb{
  margin-top: 10px;
  margin-bottom: 10px;
}
.p-t-xs{
  padding-top: 5px;
}
.p-t{
  padding-top: 10px;
}
.p-t-md{
  padding-top: 15px;
}
.p-b{
  padding-bottom: 10px;
}
.p-b-md{
  padding-bottom: 15px;
}
.p-l{
  padding-left: 10px;
}
.p-r{
  padding-right: 10px;
}
.p-l-md{
  padding-left: 15px;
}
.p-r-md{
  padding-right: 15px;
}
.p-lr{
  padding-left: 10px;
  padding-right: 10px;
}
.p-md{
  padding: 15px;
}
.p-sm{
  padding: 10px;
}
.p-tb{
  padding: 10px 0;
}
.p-lr-md{
  padding-left: 15px;
  padding-right: 15px;
}

//定位
.pull-left{
  float: left;
}
.pull-right{
  float: right;
}
//清除浮动
.clearfix{
  clear: both;
  &:before,&:after{
    content: " ";
    display: table;
    clear: both
  }
}
//只允许一行
.text_oneline{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
//多行显示自动截取
@mixin text_moreline($count){
  height: auto;
  line-height: 1.5em;
  display: -webkit-box;
  -webkit-line-clamp: $count;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
//媒体组件
.media{
  margin-top: 15px;
  &:first-child {
    margin-top: 0;
  }
  .media-left, .media-right, .media-body {
    display: table-cell;
    vertical-align: top;
  }
  .media-left{
    padding-right: 10px;
  }
  .media-right{
    width: 10000px;
  }
}
//圆头像
.circle_head{
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
}
.circle_head img{
  width: 100%;
}
.circle_head_xs{
  width: 42px;
  height: 42px;
  line-height: 42px;
}
.circle_head_md{
  width: 52px;
  height: 52px;
  line-height: 52px;
  font-size: 16px;
}
//列表内联
.list-line{
  li{
    display: inline-block;
  }
}
.list-line-3{
  li{
    width: 32%;
    margin-top: 5px;
  }
}
//图片响应式
.img-responsive{
  max-width: 100%;
  height: auto;
}
.bbs{
  border-bottom: 0.5px solid $border_color;
}
//主题色按钮类
.btn-theme{
  background: $theme_color;
  border-color: $theme_color;
  color: #ffffff;
  &:active,&:hover{
    background: rgba($theme_color,.8) !important;
    color: #ffffff !important;
  }
  &:after{
    border-color: $theme_color;
  }
}
.btn-theme-d{
  background: #ffffff;
  border-color: $theme_color;
  color: $theme_color;
  &:active,&:hover{
    background: rgba($theme_color,.8) !important;
    color: #ffffff !important;
  }
  &:after{
    border-color: $theme_color;
  }
  &:not(.weui-btn_disabled):visited{
    color: $theme_color;
  }
}
.visible-xs{
  display: none !important;
}
.t-2{
  position: relative;
  top: 2px;
}
@media screen and (min-width: 413px) {
  .visible-xs{
    display: inline-block;
  }
}